<template>
  <view :class="['x-subscribe-guide',{'visible': visible}]" @click="handleClose">
    <view class="image-wrapper">
      <x-image src="/assets/images/subscribe-guide.gif" />
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
export default {
  name: 'XSubscribeGuide',
  components: {
    XImage
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    };
  },
  computed: {},
  watch: {},
  created() {

  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
      this.$store.dispatch('message/setData', {
        dialogSubscribeGuide: false
      });
    }
  }
};
</script>

<style scoped lang="scss">
.x-subscribe-guide{
  z-index: 1000;
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);

  &.visible{
    display: block;
  }
  .image-wrapper{
    position: absolute;
    top: 200px;
    left: 50%;
    width: 750px;
    height: 340px;
    transform: translateX(-50%);
  }
}
</style>
